<!--
 * @docName: authorizationEntAccount.vue
 * @Author: mwl
 * @Date: 2023/9/26
 * @LastEditors: zhongxiong
 * @LastEditTime: 14:30
-->
<template>
  <div class="content">
    <a-form-model ref="form" :model="form" :rules="rules" class="password-retrieval-form">
      <div class="input-info">
        <!--            <h2 class="title"></h2>-->
        <h2 class="title title1">提交验证</h2>
        <a-form-model-item label="开户行" prop="bankName" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-select placeholder="请输入开户行"
                    show-search
                    v-model="form.bankName"
                    :default-active-first-option="false"
                    :show-arrow="false"
                    :filter-option="false"
                    :not-found-content="null"
                    @search="bankInfoListSearch"
                    @change="bankInfoListChange">
            <a-select-option v-for="item in bankInfoList" :key="item.bankName">
              {{ item.bankName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="开户支行" prop="subBankName" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model="form.subBankName" has-feedback placeholder="请填写开户支行" type="text" />
        </a-form-model-item>
        <a-form-model-item label="账户名称" prop="userName" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model="form.userName"  placeholder="请填写账号名称" type="text" />
        </a-form-model-item>
        <a-form-model-item prop="cityName" :label-col="labelCol" :wrapper-col="wrapperCol">
          <span slot="label"><i style="color: #f5222d;margin-right: 4px;">*</i>所在地</span>
          <div class="fixed-box">
            <a-select placeholder="请选择" v-model="province" style="width: 200px" @change="handleProvinceChange">
              <a-select-option v-for="province in provinceData" :key="province">
                {{ province }}
              </a-select-option>
            </a-select>
            -
            <a-select placeholder="请选择" v-model="secondCity" @select="cityCodeObtain" style="width: 200px">
              <a-select-option v-for="city in cityData" :key="city.id">
                {{ city.cityName }}
              </a-select-option>
            </a-select>
          </div>
        </a-form-model-item>
        <a-form-model-item label="银行账户" prop="bankAccountNo" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model="form.bankAccountNo" placeholder="请填写银行账户" type="text" />
        </a-form-model-item>
        <template>
          <a-form-model-item label="操作" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-button type="primary" v-if='JSON.stringify(dataAccount)==="{}"' @click="verificationEventFun(masterType)">下一步</a-button>
            <a-button type="primary" v-else @click="dataAccountEvent()">下一步</a-button>
          </a-form-model-item>
        </template>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import { getAreaCodelist, getAreaCodeListProvince, getBankInfoList } from '@api/bankAccount'
import { getEqueryEntDetail } from '@api/account'
import { mapGetters } from 'vuex'
import { getAthAccountSave } from '@api/authorizationAccount'
export default {
  name: 'authorizationEntAccount',
  data(){
    return {
      masterType:null,//1渠道账户 2企业账户
      entId:'',
      infoShow:false,
      businessAccountId:null,
      infoDetails:{},
      accountInfoDeatil:{},
      labelCol: { span: 3 },
      wrapperCol: { span: 10 },
      dataAccount:{},
      form:{
        subBankName: '',
        bankName:'',
        accountType:1,
        businessType:4,
        userName:'',
        bankAccountNo: '',
        legalName:''
      },
      provinceData:[],
      cityData:[],
      bankInfoList:[],
      secondCity:'',
      province:'',
      rules: {
        bankName:[{ required: true, message: '请填写开户行', trigger: 'blur' }],
        subBankName: [{ required: true, message: '请填写开户支行', trigger: 'blur' }],
        cityName: [
          { required: false, message: '请选择所在地', trigger: 'change' },
          { validator: this.validateSelect }
        ],
        bankAccountNo: [
          { required: true, message: '请填写银行账户', trigger: 'blur' },
          { validator: this.validateBankCard }
        ],
      }
    }
  },
  created() {
  },
  mounted() {
    if(this.$route.query.masterType){
      this.masterType = this.$route.query.masterType
      if(this.$route.query.masterType == 1){
        // this.form.userName = this.nickname();
        this.accountShow = false
      }
    }
    if(this.$route.query.a){
      this.form.businessType = this.$route.query.a;
    }
    if(this.$route.query.bizId && this.$route.query.bizId !=1){
      this.entId = this.$route.query.bizId;
      this.form.masterId = this.entId;
      this.getEqueryEntDetailFun();
    }
    this.getAreaCodeListProvinceFun();
  },
  methods:{
    ...mapGetters(["nickname", "avatar","userInfo"]),
    //校验为银行账户
    validateBankCard(rule,value,callback){
      let reg = /^([0-9]{7,30})$/;
      if (!value || reg.test(value)){
        callback();
      }else{
        callback("您的银行卡号格式不正确!");
      }
    },
    //校验所在地
    validateSelect(rule,value,callback){
      if (this.province && this.secondCity){
        if (this.form.cityCode){
          callback();
        }else{
          callback("请重新选择所在地!");
        }
      }else{
        callback("所在地不能为空!");
      }
    },
    //c查询企业详情
    getEqueryEntDetailFun(){
      let params = {};
      params.entId = this.entId;
      getEqueryEntDetail(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.infoDetails = res.result;
          /*this.form.userName = res.result.entDetailBase.entName;
          this.form.legalName = res.result.entDetailBase.legalName;*/
          this.entSetStatus = res.result.setStatus;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //开户行选择
    bankInfoListSearch(value){
      console.log(value,'Search')
      if(value && value !='银行' && value !='银' && value !='行'){
        this.getBankInfoListFun(value);
      }
      console.log(this.bankInfoList)
    },
    bankInfoListChange(value){
      this.form.bankName = value;
      console.log(value,'Change')
    },
    //银行列表查询
    getBankInfoListFun(value){
      let that = this;
      let params = {};
      params.name = value;
      getBankInfoList(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          that.bankInfoList = res.result;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //获取省份列表
    getAreaCodeListProvinceFun(){
      let that = this;
      let params = {};
      getAreaCodeListProvince(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          that.provinceData = res.result;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //获取城市编号等信息
    getAreaCodelistFun(province){
      let that = this;
      let params = {};
      params.provinceName = province;
      getAreaCodelist(params).then(res => {
        if (res.success) {
          // 赋值表格数据
          that.cityData = res.result;
          that.secondCity = that.cityData[0].cityName;
          that.form.cityCode = that.cityData[0].cityCode;
          that.form.cityName = that.secondCity;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //点击城市事件
    handleProvinceChange(value) {
      this.form.provinceName = value;
      this.getAreaCodelistFun(value)
      // this.cities = cityData[value];
    },
    //城市选择事件
    cityCodeObtain(value,label){
      for(let item of this.cityData){
        if(item.id == value){
          this.form.cityCode = item.cityCode;
          this.form.cityName = item.cityName;
        }
      }

    },
    //数据存在执行下一步
    dataAccountEvent(){
      this.$emit('popUpsClick',{'name':'signContract','data': this.dataAccount})
    },
    //开始验证按钮事件
    verificationEventFun(masterType){
      this.$refs.form.validate(valid => {
        if (valid) {
          //执行
          let that = this;
          let params = {};
          params = that.form;
          params.masterType = masterType;
          getAthAccountSave(params).then(res => {
            if (res.success) {
              let data = res.result;
              this.dataAccount = data;
              this.$emit('popUpsClick',{'name':'signContract','data':data})
            }else{
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback){
      let promiseArray = []
      for(let item of arr){
        let p = new Promise((resolve, reject) => {
          this.$refs['form'].validateField(item, (err)=>{
            if(!err){
              resolve();
            }else{
              reject(err);
            }
          })
        });
        promiseArray.push(p)
      }
      Promise.all(promiseArray).then(()=>{
        callback()
      }).catch(err=>{
        callback(err)
      })
    },
  }
}
</script>

<style scoped lang="less">
.content{
  padding: 20px;
  background: #fff;
  .title{
    //padding: 20px;
    box-sizing: border-box;
    height: 44px;
    line-height: 35px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: @primary-color;
    margin-bottom: 20px;
  }
  .title1{
    width: 161px;
    margin-top: 20px;
    padding-left: 20px;
    background: url("../../../assets/account/one.png") no-repeat;
    background-size: 100% 100%;
  }
  .title2{
    width: 196px;
    background: url("../../../assets/account/two.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 20px;
  }
  .fixed-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/deep/.ant-tabs{
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
}
.icon{
  position: absolute;
  top: 0;
  right: 10px;
  color: #52c41a;
  font-size: 16px;
}

</style>
